<template>
  <div class="photo-preview">
    <img :src="base64" alt=""/>
    <canvas ref="canvas" class="photo-preview"></canvas>
    <canvas ref="canvasShare" class="photo-preview"></canvas>
  </div>
</template>

<script>
import previewBorderImg from '@/assets/images/preview-border.png'
import previewQRCodeImg from '@/assets/images/preview-qrcode.png'
export default {
  name: 'photoPreview',
  props: {
    src: {
      type: String,
      default: ''
    },
    hasQRCode: {
      type: Boolean,
      default: false
    }
  },
  data: () => ({
    base64: '',
    borderImg: null,
    qrCodeImg: null
  }),
  mounted () {
    this.src && this.setPhoto()
  },
  methods: {
    sharePhoto () {
      if (!this.src) return
      let domWidth = this.$refs.canvasShare.offsetWidth
      let domHeight = this.$refs.canvasShare.offsetHeight
      let canvasWidth = domWidth * 3
      let canvasHeight = domHeight * 3
      let canvas = this.$refs.canvasShare
      let ctx = canvas.getContext('2d')
      canvas.width = canvasWidth
      canvas.height = canvasHeight
      let image = new Image()
      let qrCodeImage = new Image()
      image.src = this.src
      image.crossOrigin = '*'
      image.setAttribute('crossOrigin', 'anonymous')
      image.onload = () => {
        ctx.drawImage(image, 0, 0, canvasWidth, canvasWidth / 0.56221)
        qrCodeImage.src = previewQRCodeImg
      }
      qrCodeImage.onload = () => {
        if (this.hasQRCode) {
          let qrCodeHeight = canvasWidth * 0.253
          ctx.drawImage(qrCodeImage, 0, canvasHeight - qrCodeHeight, canvasWidth, qrCodeHeight)
        }
        return canvas.toDataURL()
      }
    },
    setPhoto () {
      let domWidth = this.$refs.canvas.offsetWidth
      let domHeight = this.$refs.canvas.offsetHeight
      let canvasWidth = domWidth * 3
      let canvasHeight = domHeight * 3
      let canvas = this.$refs.canvas
      let ctx = canvas.getContext('2d')
      canvas.width = canvasWidth
      canvas.height = canvasHeight
      let photoPaddingTop = 34 / 833
      let photoPaddingLeft = 0.057395143
      let photoPaddingRight = 0.061810155
      let photoPaddingBottom = 94 / 833
      let image = new Image()
      let renderBorderImg = () => {
        if (this.borderImg) {
          ctx.drawImage(this.borderImg, 0, 0, canvasWidth, canvasHeight)
          this.base64 = canvas.toDataURL()
        } else {
          this.borderImg = new Image()
          this.borderImg.src = previewBorderImg
          this.borderImg.onload = () => {
            ctx.drawImage(this.borderImg, 0, 0, canvasWidth, canvasHeight)
            this.base64 = canvas.toDataURL()
          }
        }
      }
      image.src = this.src
      image.onload = () => {
        let imgWidth = canvasWidth - photoPaddingLeft * canvasWidth - photoPaddingRight * canvasWidth
        ctx.drawImage(image, photoPaddingLeft * canvasWidth, photoPaddingTop * canvasHeight, imgWidth, imgWidth / 0.56221)
        if (this.qrCodeImg) {
          if (this.hasQRCode) {
            let qrCodeWidth = canvasWidth - canvasWidth * photoPaddingLeft - canvasWidth * photoPaddingRight
            let qrCodeHeight = qrCodeWidth * 0.253
            ctx.drawImage(this.qrCodeImg, photoPaddingLeft * canvasWidth, canvasHeight - qrCodeHeight - photoPaddingBottom * canvasHeight, qrCodeWidth, qrCodeHeight)
          }
          renderBorderImg()
        } else {
          this.qrCodeImg = new Image()
          this.qrCodeImg.src = previewQRCodeImg
          this.qrCodeImg.onload = () => {
            if (this.hasQRCode) {
              let qrCodeWidth = canvasWidth - canvasWidth * photoPaddingLeft - canvasWidth * photoPaddingRight
              let qrCodeHeight = qrCodeWidth * 0.253
              ctx.drawImage(this.qrCodeImg, photoPaddingLeft * canvasWidth, canvasHeight - qrCodeHeight - photoPaddingBottom * canvasHeight, qrCodeWidth, qrCodeHeight)
            }
            renderBorderImg()
          }
        }
      }
    }
  },
  watch: {
    src (val) {
      val && this.setPhoto()
    }
  }
}
</script>

<style lang="scss">
  .photo-preview {
    canvas, img {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    canvas {
      opacity: 0;
      z-index: -1;
    }
  }
</style>
